<template>
	<div>
		<div class="header">
	        <em>影院</em>
	        <span class="go-back"><a href="detail.html"></a></span>
	    </div>
	    <div class="seat-title">
	        <h2>{{$route.query.name}}</h2>
	        <h4>今天{{getmon}}月{{new Date().getDate()}}日 {{roomobj.Time}} 国语2D</h4>
	        <div class="lobby">
	        	<span>{{roomobj.Room}}银幕</span>
	        </div>
	    </div>
	    <div class="container seat">
			<div class="seating">
				<ul>
					<li v-for="item in seatlist" v-bind:class="item.status" @click="checkseat(item.id)"></li>
					<!--<li  class="active-selled"></li>-->
				</ul>
			</div>
			<div class="tips-seat">
				<span class="selecting">可选</span><span class="selected">已选</span><span class="selled">已售</span>
			</div>
			<div class="ticket">
				<h5>已选座位</h5>
				<div class="ticket-item" v-for="(seat,index) in addseat">
					<a href="#" @click="deleteSeat(index)">
						{{seat.Row}}排{{seat.Col}}座<em>￥{{roomobj.Price}}</em>
					</a>
				</div>
			</div>
	   </div>
	   <div class="seat-bar">
	   		<a href="#">￥{{total}}确认选座</a>
	   </div>
	</div>
</template>

<script>
	import {Toast} from "mint-ui"
	export default{
		data(){
			return{
				seatlist:[],
				getmon:new Date().getMonth()+1,
				roomobj:{},
				addseat:[]
			}
		},
		created(){
			for(var i=0;i<100;i++){
				var item={id:i,status:""};
				this.seatlist[i]=item;
			}
			console.log(this.seatlist)
			this.movie()
		},
		methods:{
			movie(){
				this.$http.get("http://film.glkjjt.com/api/Movie/ShowsDetail?TimeID="+this.$route.query.timeID)
				.then(res=>{
//					console.log(res)
					this.roomobj=res.data
				})
				.catch(err=>{
					console.log(err)
				})
				
				this.$http.get("http://film.glkjjt.com/api/Movie/Seat?TimeID="+this.$route.query.timeID,{
//					headers:{"authorization":"basic "+localStorage.tokenID}
					headers:{"authorization":"basic "+"fd3f674f347043d58b0b95d7801f5964"}
				})
				.then(res => {
					for (var i = 0; i < res.data.length; i++) {
						var index = (res.data[i].Row - 1) * 10 + res.data[i].Col - 1;
						this.seatlist.push(index);
						this.seatlist[index].status="active-selled";
					}
				})
				.catch(err=>{
					console.log(err)
				})

//              this.$http.get("/Movie/Seat?TimeID="+ this.$route.query.timeID,{
//              headers: {"authorization": "basic "+localStorage.tokenID}
//              })
//				.then(res => {
//					for (var i = 0; i < res.data.length; i++) {
//						var index = (res.data[i].Row - 1) * 10 + res.data[i].Col - 1;
//						this.seatlist.push(index);
//						this.seatlist[index].status="active-selled";
//					}
//				})
//				.catch(err => {
//					console.log(err);
//				})
		    },
			checkseat(index){
				if(this.addseat.length>3){
					Toast({
						message:"最多不能超过4个",
						position:"top",  
						duration:3000 
					});
				}else{
					if(this.seatlist[index].status==""){
						this.seatlist[index].status="active"
						var row=Math.floor(index/10)+1;  //第几排
						var col=index%10+1;  //第几列
						this.addseat.push({Row:row,Col:col})
				    }
				}
			},
			deleteSeat(index){
				var row=this.addseat[index].Row
				var col=this.addseat[index].Col
				this.addseat.splice(index,1)
				var i=(row-1)*10+col-1
				this.seatlist[i].status=""
			}
		},
		computed:{
			total:function(){
				return this.addseat.length*this.roomobj.Price
			}
		}
    }
</script>

<style>
</style>